<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面
    </title>
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <div th:replace="fragments/header :: header"></div>
    <!-- 注册页面主体 -->
    <div class="register-container">
        <div class="register-content">
            <div class="register-header">
                <h2>注册账号</h2>
                <p>已有账号？<a href="./login.html">立即登录</a></p>
            </div>
            <div class="register-form">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <div class="input-wrapper">
                        <i class="fas fa-user"></i>
                        <input type="text" id="username" name="username" required
                               placeholder="请输入用户名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email">邮箱：</label>
                    <div class="input-wrapper">
                        <i class="fas fa-envelope"></i>
                        <input type="email" id="email" name="email" required
                               placeholder="请输入邮箱">
                    </div>
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <div class="input-wrapper">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" name="password" required
                               placeholder="请输入密码">
                    </div>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码：</label>
                    <div class="input-wrapper">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="confirmPassword" name="confirmPassword" required
                               placeholder="请再次输入密码">
                    </div>
                </div>
                <div class="form-group agreement">
                    <input type="checkbox" id="agree" name="agree" required>
                    <label for="agree">我已阅读并同意<a href="#">用户协议</a>和<a href="#">隐私政策</a></label>
                </div>
                <!-- 错误提示 -->
                <div id="errMsg"></div>
                <button type="submit" id="regBtn" class="register-btn">注册</button>
            </div>
        </div>
    </div>
    <script src="./layui/layui.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script>
        // 设置axios的默认请求头
        axios.defaults.baseURL = "http://127.0.0.1:8080/api";
        axios.defaults.headers.post['Content-Type'] = 'application/json';
        // 1.获取所有的表单元素以及注册按钮
        const regBtn = document.querySelector('#regBtn');
        const errMsg = document.querySelector('#errMsg');
        const username=document.querySelector('#username');
        const password=document.querySelector('#password');
        const email=document.querySelector('#email');
        const confirmPassword =document.querySelector('#confirmPassword');
        let usernamereg=/^[a-zA-Z0-9_-]{3,20}$/;
        let emailreg=/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        let passwordreg=/^[A-Za-z0-9]{6,12}$/;
        regBtn.addEventListener('click',function(){
            // console.log('1111111111111');
            // 2.获取表单元素的值
            let usernameVal=username.value.trim();
            let passwordVal=password.value;
            let emailVal=email.value.trim();
            let confirmPasswordVal=confirmPassword.value.trim();
            // 3.判断表单元素的值是否为空
            if(usernameVal===''){
                errMsg.innerHTML='用户名不能为空';
                return;
            }
            if(emailVal ===''){
                errMsg.innerHTML='邮箱不能为空';
                return;
            }
            if(passwordVal ===''){
                errMsg.innerHTML='密码不能为空';
                return;
            }
            if(confirmPasswordVal ===''){
                errMsg.innerHTML='确认密码不能为空';
                return;
            }
            // 4.判断表单元素的值是否符合要求
            if(!usernamereg.test(usernameVal)){
                errMsg.innerHTML='用户名为3-20位的字母、数字、下划线或减号组成';
                return;
            }
            if(!emailreg.test(emailVal)){
                errMsg.innerHTML='邮箱格式不正确';
                return;
            }
            if(!passwordreg.test(passwordVal)){
                errMsg.innerHTML='密码格式不正确,6-12位的字母、数字组成';
                return;
            }
            if(passwordVal !==confirmPasswordVal){
                errMsg.innerHTML='两次输入的密码不一致';
                return;
            }else{
                errMsg.innerHTML = '';
            }
            // 5.提交数据到接口
            let params={
                username:usernameVal,
                password:passwordVal,
                email:emailVal
            }
            ApiService.user.register(params).then(response=>{
                if (response.data) {
                    window.location.href = './login.html';
                } else {
                    layer.msg(error.response.data || '注册失败')
                }
            }).catch(error => {
                console.error("注册失败:", error);
                layer.msg(error.response.data || '注册失败')
            });
            // console.log('=====================',params);
            // 6.判断接口返回的数据
            // 7.如果接口返回的数据是成功的，跳转到登录页面
            
        })
        
    </script>
</body>
</html>